<template>
  <div class="item-prop-detail">
    <el-table ref="bandTable" :data="propList" border fit highlight-current-row class="band-table" size="mini" >
      <el-table-column label="Title" width="100" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.Title" class="line-input" />
        </template>
      </el-table-column>
      <el-table-column label="Prop List" width="400">
        <template slot-scope="scope">
          <el-select v-model="scope.row.PropIdList" multiple class="full-width" @focus="onSelectPropIdList(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="File List" width="600px">
        <template slot-scope="scope">
          <div v-for="file in scope.row.FileIdList" :key="file" class="lin-flex">
            <span>{{ file }}</span>
            <i class="el-icon-error margin-left-10" style="padding-top: 6px; color:#F56C6C" @click="onDeleteFile(scope.row, file)" />
          </div>
          <el-upload
            :multiple="true"
            :on-success="(res, file, fileList) => onFileSuccess(res, file, fileList,scope.row)"
            :on-remove="onFileRemove"
            :action="uploadPath"
            name="file"
            accept=".jpg,.jpeg,.png,.doc,.docx,.pdf"
            :headers="{'Authorization': token}"
            :auto-upload="true"
            :show-file-list="false"
            :file-list="scope.row.FileIdList"
          >
            <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column align="center" width="110" label="Action">
        <template slot-scope="scope">
          <el-button icon="el-icon-plus"  class="single-icon-button" type="primary"  @click="onAddRow(scope.$index)" />
          <el-button icon="el-icon-close" class="single-icon-button" size="mini" type="danger"  @click="onDeleteRow(scope.$index)" />
        </template>
      </el-table-column>
    </el-table>

    <prop-select-dialog v-model="propSelectDialog" :prop-tree="standard.PropList" />
  </div>
</template>

<script>
import PropSelectDialog from '@/views/standard/components/PropSelectDialog'
import { mapGetters } from 'vuex'
import { deepClone } from '@/utils'

const defaultProp = {
  Title: '',
  PropIdList: [],
  FileIdList: []
}

export default {
  name: 'ItemPropDetail',
  components: { PropSelectDialog },
  props: {
    propText: {
      type: String,
      default: ''
    },
    value: {
      type: Array,
      default() {
        return []
      }
    },
    standard: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      propList: [],
      propSelectDialog: {
        show: false,
        title: '',
        form: {
          propIdList: []
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'uploadPath',
      'token'
    ])
  },
  watch: {
    value() {
      this.initValue()
    },
    propList() {
      this.$emit('change', this.propList)
      this.$emit('input', this.propList)
    }
  },
  created() {
    this.initValue()
  },
  methods: {
    initValue() {
      this.propList = this.value
    },
    onSelectPropIdList(row) {
      this.$set(this.propSelectDialog, 'title', this.$t('standard.selectProp'))
      this.$set(this.propSelectDialog, 'form', row)
      this.$set(this.propSelectDialog, 'show', true)
    },
    onFileSuccess(res, file, fileList, row) {
      row.FileIdList.push(file.response.Data.Id)
    },
    onFileRemove() {

    },
    onAddRow(index) {
      this.propList.splice(index + 1, 0, deepClone(defaultProp))
    },
    onDeleteRow(index) {
      this.propList.splice(index, 1)
    },
    onDeleteFile(row, file) {
      row.FileIdList.splice(row.FileIdList.indexOf(file), 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.item-prop-detail {
  width: 1211px;
}
</style>
